<template>
  <div class="doctor-form-container">
    <div class="form-card">
      <div class="form-header">
        <span class="form-title">{{ $route.query.index ? '编辑医生信息' : '新增医生信息' }}</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="doctor-form">
        <div class="form-left">
          <el-form-item label="医生照片" prop="dockerImage">
            <image-upload v-model="form.dockerImage"/>
          </el-form-item>
          <el-form-item label="医生姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入医生姓名" />
          </el-form-item>
          <el-form-item label="职称" prop="titleId">
            <el-select v-model="form.titleId" placeholder="请输入职称" class="full-width">
              <el-option
                v-for="item in tion"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="form-right">
          <el-form-item label="所属医院" prop="hospitalareaId">
            <el-select v-model="form.hospitalareaId" placeholder="医院院区" class="full-width">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.address"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属科室" prop="departmentId">
            <el-select v-model="form.departmentId" placeholder="所属科室" class="full-width">
              <el-option
                v-for="item in option"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" prop="tags">
            <el-input v-model="form.tags" placeholder="请输入标签，多个用逗号分隔" />
          </el-form-item>
        </div>
        <div class="form-bottom">
          <el-form-item label="医生简介" prop="intro">
            <el-input type="textarea" v-model="form.intro" placeholder="请输入医生简介" rows="3" />
          </el-form-item>
          <el-form-item label="专长" prop="specialty">
            <el-input type="textarea" v-model="form.specialty" placeholder="请输入专长" rows="3" />
          </el-form-item>
        </div>
      </el-form>
      <div class="form-footer">
        <el-button type="primary" @click="saveupif">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {addDoctor, getDoctor, updateDoctor} from "@/api/system/doctor";
import {getlist} from "@/api/system/area";
import {getdepartmentA} from "@/api/system/department";
import {rules} from "../../../../.eslintrc";
import {getAllJobTitle} from "@/api/system/title";

export default {
  data() {
    return {
      form: {
        id: null,
        dockerImage: null,
        hospitalareaId: null,
        departmentId: null,
        name: null,
        titleId: null,
        intro: null,
        specialty: null,
        tags: null,
        status: null
      },
      options: [],
      option: [],
      tion: [],
      openA: [],
      rules: {
        hospitalareaId: [
          { required: true, message: "所属医院院区ID不能为空", trigger: "blur" }
        ],
        departmentId: [
          { required: true, message: "所属科室ID不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "医生姓名不能为空", trigger: "blur" }
        ],
      }
    }
  },
  created() {
    this.submitForm()
    this.handleChange()
  },
  methods: {
    submitForm() {
      if(this.$route.query.index != null){
        getDoctor(this.$route.query.index).then(res=>{
          this.form = res.data
        })
      }else{
        this.form = {
          id: null,
          hospitalareaId: null,
          departmentId: null,
          name: null,
          titleId: null,
          intro: null,
          specialty: null,
          tags: null,
          ext: null,
          status: null,
        }
      }
      // console.log("路由传参接受的id是:"+ this.$route.params.leaderId)
      console.log("路由传参接受的id是:"+ this.$route.query.index)
    },
    handleChange(){
      getlist().then(res=>{
        this.options = res.data
      })
      getdepartmentA().then(res=>{
        this.option = res.data
      })
      getAllJobTitle().then(res=>{
        this.tion = res.data

      })
    },
    saveupif(){
      if(this.$route.query.index != null){
        updateDoctor(this.form).then(response => {
          this.$modal.msgSuccess("修改成功")
          this.$router.push({
            name: 'Doctor',
          })
        })
      }else{
        addDoctor(this.form).then(response => {
          this.$modal.msgSuccess("新增成功")
          this.$router.push({
            name: 'Doctor',
          })
        })
      }
    },
    cancel(){
      this.form = {
        id: null,
        hospitalareaId: null,
        departmentId: null,
        name: null,
        titleId: null,
        avatar: null,
        intro: null,
        specialty: null,
        tags: null,
        ext: null,
        status: null,
      }
    },
  }
}
</script>

<style scoped>
.doctor-form-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-card {
  width: 100%;
  max-width: 1200px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.form-header {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.form-title {
  font-size: 18px;
  color: #303133;
  font-weight: 500;
}

.doctor-form {
  padding: 20px;
}

.form-left,
.form-right {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}

.form-left {
  margin-right: 2%;
}

.form-bottom {
  margin-top: 20px;
  width: 100%;
}

.el-form-item {
  margin-bottom: 18px;
}

.el-form-item__label {
  color: #606266;
  font-weight: normal;
}

.el-input__inner,
.el-textarea__inner {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: border-color 0.2s;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: #409eff;
}

.full-width {
  width: 100%;
}

.form-footer {
  padding: 20px;
  text-align: center;
  border-top: 1px solid #ebeef5;
}

.el-button {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-button--default {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
}

.el-button--default:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .form-left,
  .form-right {
    width: 100%;
    margin-right: 0;
  }
  
  .doctor-form {
    padding: 15px;
  }
  
  .form-header {
    padding: 15px;
  }
  
  .form-footer {
    padding: 15px;
  }
}
</style>
